
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库  v2.7.13-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		<!--   3.6.5    不要用4.x  Vue.components("router-link") -->
		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>

		<style>  
		
		</style>
	</head>
	<body>

		<div id="app">
			
			<!-- router-link 是一个全局组件  -->
			 <router-link :to="{name:'User',params:{id:100,name:'张飞'}}">用户管理</router-link>
			 <router-link to="/config">配置管理</router-link>
			
			<!-- 
				此处跟局超链接的url 动态切换内容 
			 -->
			 
			<div>
				
				 <router-view></router-view>
				
			</div>
			
			
		</div>
		
		

		
		
		<script>
		
		
			// 定义 url  和 动态组件的  映射
			let User = {
				template:'<div style="border:solid 1px red" > <h4>动态显示内容1</h4>  用户列表用户的id信息 {{$route.params.id}}  ---  {{$route.params.name}}     </div>'
				
			}
			
			let Config = {
				template:'<div style="border:solid 1px blue">  <h4>动态显示内容2</h4>  配置列表</div> '
			}
			
			
			//路由
			let router = new VueRouter({
				  routes: [
					  {
						path: '/user',
						name:'User',
						component: User
					}, {
						path: '/config',
						component: Config
					}
				]
				
			})
			
			
			
			
		
			
			//只有跟 Vue对象的date 声明时 JSON对象
			let vm = new Vue({
				el: '#app',
				
				data: {
					show:true
				},
				// 管理路由
				// router:router,
				router,
				//上面的省略的写法
				components:{
					
				}
				
				

			});
		</script>

	</body>
</html>
